<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Bootstrap 101 Template</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!-- 
  表单
 -->

<div class="container">
  <form>
    <div class="form-group">
      <label for="">账号：</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label for="">密码：</label>
      <input type="text" class="form-control">
    </div>
  </form>

  <form class="form-inline">
    <div class="form-group">
      <label for="">账号：</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label for="">密码：</label>
      <input type="text" class="form-control">
    </div>
  </form>

  <form class="form-horizontal">
    <!-- 在表单中使用栅格系统时，form-group就相当于一个row -->
    <div class="form-group has-success">
      <label class="col-md-1 text-right control-label">账号：</label>
      <div class="col-md-11">
        <input type="text" class="form-control input-lg">
      </div>
    </div>
    <div class="form-group has-warning">
      <label class="col-md-1 text-right control-label">密码：</label>
      <div class="col-md-11">
        <input type="text" class="form-control">
      </div>
    </div>
    <div class="form-group has-error">
      <label class="col-md-1 text-right control-label">邮箱：</label>
      <div class="col-md-11">
        <input type="text" class="form-control input-sm" disabled>
      </div>
    </div>
    <div class="form-group">
      <label class="col-md-1 text-right control-label">手机：</label>
      <div class="col-md-11">
        <input type="text" class="form-control" readonly>
      </div>
    </div>

    <div class="form-group has-success has-feedback">
      <label class="control-label" for="inputSuccess2">Input with success</label>
      <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess2Status" class="sr-only">(success)</span>
    </div>
    <div class="form-group has-warning has-feedback">
      <label class="control-label" for="inputWarning2">Input with warning</label>
      <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
      <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
      <span id="inputWarning2Status" class="sr-only">(warning)</span>
    </div>
  </form>
</div>
  
</body>
</html>